﻿
/* ==========================================================================
   Page styles
   ========================================================================== */

/* universal sly */
.slyWrap .controls { margin: 20px 0 ; }

.controls { text-align: center; }

.sly { overflow: hidden; }
.sly > ul { list-style: none; margin: 0; padding: 0; }
.sly > ul li { margin: 0; padding: 0; background: #4DBCE9; color: #fff; text-align: center; cursor: pointer; }
.sly > ul li.active { background: #fafafa; color: #aaa; z-index: 100; }

.pages { list-style: none; margin: 20px 0; padding: 0; text-align: center; }
.pages li { display: inline-block; width: 11px; height: 11px; margin: 0 2px; text-indent: -999px; background: #fff; border-radius: 10px; cursor: pointer;
	overflow: hidden; border: 1px solid #aaa;
}
.pages li:hover { background: #eee; }
.pages li.active { background: #999; border-color: #888; box-shadow: inset 0 0 0 2px #eee; }

.scrollbar { background: #808080; border-radius: 4px; border: 2px solid #808080; border-top-color: #666; line-height: 0; }
.scrollbar .handle { border-radius: 4px; background: #fff; cursor: pointer; line-height: 0;
	-webkit-box-shadow: 0 1px 0 #555;
	-moz-box-shadow: 0 1px 0 #555;
	-o-box-shadow: 0 1px 0 #555;
	box-shadow: 0 1px 0 #555;
}

/* Horizontal examples */
.slyWrap { margin: 3em 0; }

.scrollbar { margin: 1em 0; height: 5px; }
.scrollbar .handle { width: 100px; height: 100%; }

.example1 .sly { height: 200px; }
.example1 .sly ul { height: 100%; }
.example1 .sly ul li { float: left; width: 300px; height: 100%; margin: 0 1px 0 0; padding:5px; }

